<template>
	<div class="container" v-loading="loading">
		<group v-if="!loading" v-model:group="model" @update-group="handleUpdateRoot" :options="options"></group>
		<pre v-if="debug">{{ formattedQuery }}</pre>
	</div>
</template>

<script>
	import group from './group.vue'
	import cal from "./calculationJson.js"
	export default {
		props: {
			modelValue: {
				type: Object,
				default: () => ({
					condition: "and",
					rules: []
				}),
				required: true
			},
			debug: {
				type: Boolean,
				default: false
			}
		},
		components: {
			group
		},
		data() {
			return {
				query: this.modelValue,
				options: {},
				loading: true,
			}
		},
		computed: {
			formattedQuery() {
				return JSON.stringify(this.model, null, 2).replaceAll("$id", "id")
			},
			model: {
				get() {
					if (this.isEmpty(this.modelValue)) {
						this.$emit('update:modelValue', {
							"condition": "and",
							"rules": []
						});
					}
					return this.modelValue
				},
				set(value) {
					this.$emit('update:modelValue', value)
				}
			}
		},
		provide() {
			return {
				deleteRuleBy: this.deleteRuleBy
			}
		},
		mounted() {
			this.$API.system.custGroupRule.tree.get().then(res => {
				this.options = res.data;
				this.loading = false;
			})
		},
		methods: {
			removeNodeById(tree, targetId) {
				// 如果当前节点是目标节点，返回 null 表示删除
				if (tree.$id === targetId) return null;

				// 处理子节点（假设子节点存储在 children 数组中）
				if (tree.rules && Array.isArray(tree.rules)) {
					// 递归过滤所有子节点，并过滤掉被删除的节点（null）

					if (tree.rules.length == 0) {
						return null;
					}

					tree.rules = tree.rules
						.map(child => this.removeNodeById(child, targetId))
						.filter(node => node !== null);
				}

				return tree;
			},
			deleteRuleBy(id) {
				this.model = this.removeNodeById(this.model, id);
			},
			isEmpty(value) {
				if (value === null) return true;
				if (Array.isArray(value)) return value.length === 0;
				if (typeof value === 'object' && value !== null) {
					return Object.keys(value).length === 0;
				}
				return false;
			},
			handleUpdateRoot(newGroup) {
				this.model = newGroup
			}
		}
	}
</script>

<style>
	.container {
		padding-left: 0px;
		min-height: 60px;
	}

	.plus-btn {
		padding: 18px 0 7px 90px;
	}

	.group-filter-wrapper {
		position: relative;
		/*
		min-height: 65px;
		*/
		margin: 15px 0;
		margin-left: calc(var(--depth, 0) * 50px);
	}

	.group-filer-children .group-filter-wrapper {
		margin: 0 0 0 70px;
	}

	.group-filter-item {
		display: flex;
		align-items: center;
		padding: 3px 0 3px 70px;
		position: relative;
	}

	.group-filter-item:before {
		content: " ";
		position: absolute;
		left: 46px;
		top: 0;
		height: 100%;
		width: 1px;
		background-color: #ccc;
	}

	.group-filter-item:first-child:before {
		height: 50%;
		top: calc(50% + 1px) !important;
	}

	.group-filter-item:first-child:after {
		content: " ";
		position: absolute;
		left: 46px;
		top: 50%;
		height: 20px;
		width: 20px;
		border-top: 1px solid #ccc;
		border-top-left-radius: 3px;
	}

	.group-filter-item:last-child:before {
		height: 50%;
	}

	.group-filter-item:last-child:after {
		content: " ";
		position: absolute;
		left: 46px;
		top: calc(50% - 20px);
		height: 20px;
		width: 20px;
		border-bottom: 1px solid #ccc;
		border-bottom-left-radius: 3px;
	}

	/* .group-filter-item:only-child .group-filter-wrapper{
	margin: 0;
} */

	.group-filter-item:only-child:before {
		display: none;
	}

	.group-filter-item:only-child:after {
		display: none;
	}

	.group-filter-item:only-child {
		padding: 18px 0 7px 70px;
	}

	.group-filter-item:only-child.group-filer-children {
		padding: 7px 0 7px 0;
	}

	.group-filter-logical {
		position: absolute;
		top: 50%;
		left: 0;
		width: 32px;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 5px;
		background-color: #f2f2f2;
		padding-bottom: 5px;
		margin-top: -33px;
	}

	.group-filter-logical span {
		width: 25px;
		height: 25px;
		color: #908888;
		line-height: 25px;
		cursor: pointer;
		text-align: center;
		margin: 5px 0 0;
		transition: background-color .6sease, color .6sease;
	}

	.group-filter-logical .current-and {
		color: #fff;
		border-radius: 5px;
		background-color: var(--el-color-primary);
		transition: background-color .6sease, color .6sease;
	}

	.group-filter-logical .current-or {
		color: #fff;
		border-radius: 5px;
		background-color: var(--el-color-warning);
		transition: background-color .6sease, color .6sease;
	}

	.group-filer-children {
		padding: 0px 0;
		/*min-height: 98px;*/
	}

	.group-filter-toggle {
		position: absolute;
		right: -26px;
		top: 50%;
		margin-top: -10px;
	}
</style>
